<template>
    <div class="flex-5 center">
        <!-- 设计器的 容器 -->
        <div id="hiprint-printTemplate"></div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'PrinterDesigner'
}
</script>
<script setup lang="ts">
import { onMounted } from "vue";
import { hiprint } from "vue-plugin-hiprint";

onMounted(() => {
    buildDesigner();
});
/**
 * 构建设计器
 * 注意: 必须要在 onMounted 中去构建
 * 因为都是把元素挂载到对应容器中, 必须要先找到该容器
 */
let hiprintTemplate;
const buildDesigner = () => {
    // eslint-disable-next-line no-undef
    $("#hiprint-printTemplate").empty(); // 先清空, 避免重复构建
    hiprintTemplate = new hiprint.PrintTemplate({
        settingContainer: "#PrintElementOptionSetting", // 元素参数容器
    });
    // 构建 并填充到 容器中
    hiprintTemplate.design("#hiprint-printTemplate");
};
</script>